/*
 * @Author: huangyingli
 * @Date: 2023-02-24 09:38:26
 * @LastEditors: huangyingli
 * @LastEditTime: 2023-02-25 19:34:58
 * @Description:
 */
import { useEffect, useState } from 'react';
import { columnList } from '../../api/columnManage';
import { Tree, Tabs, message } from 'antd';
import style from './ContentManage.module.less';
import {
  ContentAdd,
  ContentComponents,
  ContentData,
} from '../../api/contentManage';

import AsyncForm from '../../components/AsyncForm';
import { unique } from '../../utils/utils';
let components = [];
let componentMsg;
export default function ContentManage() {
  const [treeData, setTreeData] = useState([]);
  const [labels, setLabels] = useState([]);
  const [messageApi, contextHolder] = message.useMessage();
  const [activeKey, setActiveKey] = useState([]);
  const [formData, setFormData] = useState({});
  useEffect(() => {
    columnList().then(({ data }) => {
      setTreeData(data.data);
    });
  }, []);

  function onFinish(values) {
    let result = {
      form: values,
      id: componentMsg.id,
      key: componentMsg.key,
      modalId: componentMsg.modalId,
      columnId: componentMsg.columnId,
      tableName: componentMsg.tableName,
    };
    console.log('最终数据', result);

    ContentAdd({ data: result }).then(() => {
      messageApi.open({
        type: 'success',
        content: '内容保存成功',
      });
    });
  }

  function onTabChange(activeKey) {
    // eslint-disable-next-line eqeqeq
    setActiveKey(activeKey);
    console.log('activekey', activeKey);
    componentMsg = components.find((c) => c.key == activeKey);
    console.log('componentMsg', componentMsg);
  }

  function onSelect(keys, e) {
    console.log('tree 选中', keys, e);
    keys.length &&
      ContentComponents({
        data: { key: keys[0] },
      }).then(({ data }) => {
        console.log('组件数据', data.data);
        components = data.data;
        componentMsg = components[0];
        setActiveKey(componentMsg.key);

        // setFormData();
        setLabels(
          data.data.map((d) => {
            let config = JSON.parse(d.configJson);
            console.log('config', config);
            return {
              ...d,
              label: d.name,
              children: (
                <AsyncForm
                  config={config.config}
                  compoentData={d}
                  onFinish={onFinish}
                ></AsyncForm>
              ),
            };
          })
        );
      });
  }

  function getContentData(componentMsg) {}
  return (
    <>
      {contextHolder}
      <div className={style.wrap}>
        <div className={style.tree}>
          <Tree
            treeData={treeData}
            fieldNames={{ title: 'name', key: 'key', children: 'children' }}
            onSelect={onSelect}
          ></Tree>
        </div>
        <div className={style.content}>
          <Tabs
            items={labels}
            onChange={onTabChange}
            activeKey={activeKey}
          ></Tabs>
        </div>
      </div>
    </>
  );
}
